<template>
   <ul class="tab">
       <li v-for="(item,index) in tabList" :key="index" :class="{active:checkIndex == index}" @click="tab(index)">{{item.name}}</li>
     </ul>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
export default {
  props:{
    tabList: Array
  },
  setup(props,{emit}) {
    // console.log(ctx);
    const checkIndex = ref(0);
    const tab = (val) => {
       checkIndex.value = val;
       emit('tab',val);
    }
    return{
        checkIndex,
        tab
    }
  },
};
</script>
<style lang="scss" scoped>
.tab{
    display: flex;
    li{
      width: 20%;
      line-height: 50px;
      text-align: center;
      background: rgb(141, 5, 146);
      color: #fff;
    }
    .active{
      background: #8d3ec5;
    }
  }
</style>